{extend name="iframe" /}
{block name="body"}
<div class="layui-card upvideo-body">
    <div class="layui-card-body">
        <input  id="files" type="file" name="myFile" multiple="multiple" class="layui-hide"/>
        <input  id="userId" type="text" value="{$aliUid}" class="layui-hide"/>
        <table class="layui-table layui-form">
            <thead>
            <tr><th >视频名称</th><th style="width:100px;">大小</th><th style="width:200px;">进度</th><th style="width:80px;">状态</th></tr>
            </thead>
            <tbody id="video-list">

            </tbody>
        </table>
    </div>
</div>
<div class="upvideo-btn">
    <form class="layui-form" action="" style="float:left;margin:0px;">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px !important;">视频分类</label>
        <div class="layui-input-inline">
            <select id="categoryId" name="category" lay-filter="category">
                <option value="">请选择视频分类</option>
                {foreach name="videocategory" item="v"}
                <option value="{$v.id}">{$v.type_name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    </form>
                <div id="pick_2655" style="float:left">添加视频</div>
                <button id="Btn_2655"  style="border-radius: 3px; margin-left: 15px" class="layui-btn layui-hide">开始上传</button>
<!--    <button class="layui-btn layui-hide" onclick="start()" id="button-start"><i class="fa fa-cloud-upload"></i>  开始上传</button>-->
<!--    <button class="layui-btn layui-btn-primary" onclick="ToSelectFile()" id="button-insert"><i class="fa fa-plus-circle"></i>  添加视频</button>-->
    <button class="layui-btn layui-btn-primary" onclick="shut()"id="button-shut"><i class="fa fa-times-circle"></i> 关闭</button>
</div>

<script src="__ALIYUN__/es6-promise.min.js"></script>
<script src="__ALIYUN__/aliyun-oss-sdk-5.3.1.min.js"></script>
<script src="__ALIYUN__/aliyun-upload-sdk-1.5.0.min.js"></script>
<script src="__ALIYUN__/md5.js"></script>
<script src="__ALIYUN__/upvideo.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script>
<script>
    uploadfiles(2655,"files");
    $('#pick_2655').click(function () {
        var category_id=$("#categoryId").val();
        if(category_id==''||category_id==null){
            layer.msg("请先选择视频分类");
            return false;
        }else{
            $("#pick_2655").click();
        }
    });
    var vid = document.getElementsByName("file");
    //上传文件函数
    //ids唯一ID
    //folder文件保存目录
    function uploadfiles(ids,folder) {
        $(function(){
            var $list = $("#the_"+ids);
            $btn = $("#Btn_"+ids);
            var uploader = WebUploader.create({
                resize: false, // 不压缩image
                swf: '__STATIC__/webuploader/uploader.swf', // swf文件路径
                server: '/admin/educloud/uploadFile', // 文件接收服务端。
                pick: "#pick_"+ids, // 选择文件的按钮。可选
                chunked: true, //是否要分片处理大文件上传
                chunkSize:1024*1024, //分片上传，每片2M，默认是5M
                fileSizeLimit: 6*1024* 1024 * 1024,    // 所有文件总大小限制 6G
                fileSingleSizeLimit: 10*1024* 1024 * 1024,    // 单个文件大小限制 5 G
                 threads:1,
                 formData: {
                     folder:folder  //自定义参数
                 },
                //auto: false //选择文件后是否自动上传
                 chunkRetry : 2, //如果某个分片由于网络问题出错，允许自动重传次数
                //runtimeOrder: 'html5,flash',
                // accept: {
                //   title: 'Images',
                //   extensions: 'gif,jpg,jpeg,bmp,png',
                //   mimeTypes: 'image/*'
                // }
            });
            // 当有文件被添加进队列的时候
            uploader.on( 'fileQueued', function( file ) {
                var $list = $("#video-list");
                var category_id=$("#categoryId").val();
                $list.append( '<tr  class="item">' +
                    '<td class="layui-elip">' + file.name + '</td>' +
                    '<td class="upload-video-size" id="size">' + Math.round(file.size/1024/1024 * 100) / 100 + 'M' + '</td>' +
                    '<td class="state" id="' + file.id + '">等待上传...</td>' +
                    "<td class='upload-video-operation' id='state"
                    + "'>"
                    + "等待中"
                    + "</td>"+
                    '</tr>' );
                $.ajax({
                    type:'get',
                    data:{
                        type_id:category_id
                    },
                    url:'/admin/educloud/preservation',
                    success:function (e) {
                        console.log('保存成功');
                    }
                });
                $("#Btn_2655").removeClass('layui-hide');
                $("#button-shut").removeClass('layui-hide')
                uploader.refresh()
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo( $li ).find('.progress-bar');
                }

                $li.find('p.state').text('上传中');

                $percent.css( 'width', percentage * 100 + '%' );
            });
            // 文件上传成功
            uploader.on( 'uploadSuccess', function( file,response) {
                $( '#'+file.id ).text('已上传');
                $( '#'+file.id ).siblings().eq(2).text('成功');
                $list.append('<input type="hidden" name="'+ids+'" value="'+response.filePath+'" />');
                //alert(response.filePath);
            });

            // 文件上传失败，显示上传出错
            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
            });
            // 完成上传完
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });

            $btn.on('click', function () {
                if ($(this).hasClass('disabled')) {
                    return false;
                }
                uploader.upload();
                // if (state === 'ready') {
                //     uploader.upload();
                // } else if (state === 'paused') {
                //     uploader.upload();
                // } else if (state === 'uploading') {
                //     uploader.stop();
                // }
            });
        });
    }
</script>
{/block}
